<template>
  <div class="shop">
    <!-- <el-form ref="form"
        :model="listQuery">
    <el-form-item label="员工角色:">
      <el-select
          style="width:140px;"
          v-model="listQuery.userType"
          filterable
          size='mini'
          placeholder="请选择员工角色"
        >
       <el-option
            v-for="item in roleList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
      </el-select>
    </el-form-item>
    </el-form> -->

     <div class="input_info">
      <el-input class="staff_input" size="small" v-model="listQuery.keyword" placeholder="输入员工名称搜索" clearable></el-input>
       <!-- <el-input class="staff_input" size="small" v-model="listQuery.title" placeholder="输入门店名称搜索" clearable></el-input> -->
      <el-button class="input_btn" size="small" type="primary" @click="searchShopStaff">搜索</el-button>
      
    </div>
    <!-- <el-button size='small'
    class='addstaffrole'
    type="primary"
    @click="open= true">新增员工角色</el-button> -->

    <el-table :data="tableData"
      style="width:100%"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column prop ='id' label='员工ID'></el-table-column>
      <el-table-column prop ='nickName' label='员工昵称'></el-table-column>
      <el-table-column prop ='mobile' label='员工账号'></el-table-column>
      <el-table-column prop ='organizeName' label='所属门店'></el-table-column>
      <el-table-column prop ='roleNames' label='角色名称'></el-table-column>
      <el-table-column  label='操作' fixed ='right' width='160'>
        <template slot-scope="scope">
          <el-button type='primary' size='mini' @click='openShopStaffDetail(scope.row.id)'>详情</el-button>
        <el-button  size='mini' @click='deleteadmin(scope.row.id)'>移除</el-button>
        </template>
      </el-table-column>
      </el-table>

       <el-col :span="24">
      <div class="pagination">
        <el-pagination background
          @current-change="handleCurrentChange"
          :current-page="form.page"
          :page-size="form.size"
          layout="total, prev, pager, next, jumper"
          :total="total"></el-pagination>
      </div>
    </el-col>


     <!--员工详情-->
     <jdialog title="员工详情"
      :visible.sync="showStaffDetail"
      width="800px">
     <el-row class="staff_info">
       <el-col :span='12'>员工昵称：{{formDataAdd.nickName}}</el-col>
       <el-col :span='12'>联系电话：{{formDataAdd.mobile}}</el-col>
     </el-row>

     <el-row class="staff_info">
       <el-col :span='12'>所属店铺：{{formDataAdd.organizeName}}</el-col>
       <el-col :span='12'>创建时间：{{parseTime(formDataAdd.createTime)}}</el-col>
     </el-row>
    
     <!-- <el-row class="staff_info">
       <el-col :span='24' class="staff-col"><p class="staff_al">权限清单：</p>
         <div class="active-title ">活动管理</div>
      <el-checkbox label="活动创建" name="role"></el-checkbox>
      <el-checkbox label="活动数据查看" name="role"></el-checkbox>
       </el-col>
       <el-col :span='24'>
      <div class="active-title active_subtitle">爆品管理</div>
      <el-checkbox label="爆品创建" name="role"></el-checkbox>
      <el-checkbox label="爆品数据查看" name="role"></el-checkbox>
       </el-col>
       <el-col :span='24'>
      <div class="active-title active_subtitle">现金券</div>
      <el-checkbox label="现金券创建" name="role"></el-checkbox>
      <el-checkbox label="现金券数据查看" name="role"></el-checkbox>
       </el-col>
       <el-col :span='24'>
      <div class="active-title active_subtitle">满减券</div>
      <el-checkbox label="满减券创建" name="role"></el-checkbox>
      <el-checkbox label="满减券数据查看" name="role"></el-checkbox>
       </el-col>
       <el-col :span='24'>
      <div class="active-title active_subtitle">核销</div>
      <el-checkbox label="券码核销" name="role"></el-checkbox>
       </el-col>
       
     </el-row> -->
      <div class="class_btn">
        <el-button size="mini"
          type="primary"
          @click="certainAddStaffRole">确定</el-button>
        <el-button size="mini"
          @click="showStaffDetail = false">取消</el-button>
      </div>
    </jdialog>
        <!-- 添加或修改部门对话框 -->
        <!-- <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
          <el-form ref="form" :model="formDataAdd" :rules="rules" label-width="80px">
            <el-row>
              <el-col :span="12" v-if="formDataAdd.parentId !== 0">
                <el-form-item label="所属门店" prop="parentId">
                  <el-input v-model="formDataAdd.deptName" placeholder="请输入部门名称" />
                </el-form-item>
              </el-col>
       
              <el-col :span="12">
                <el-form-item label="角色名称" prop="deptName">
                  <el-input v-model="formDataAdd.deptName" placeholder="请输入部门名称" />
                </el-form-item>
              </el-col>
              <el-col :span="12"><el-form-item label="用户名" prop="username" class="formItem">
                <el-input v-model="formDataAdd.username" placeholder="请输入用户名" type="text"></el-input>
              </el-form-item></el-col>
              <el-col :span="12"><el-form-item label="密码" prop="password" class="formItem">
                <el-input v-model="formDataAdd.password" placeholder="请输入密码" type="password"></el-input>
              </el-form-item></el-col>
              <el-col :span="12"><el-form-item label="邮箱" prop="email" class="formItem">
                <el-input v-model="formDataAdd.email" placeholder="请输入邮箱" type="text"></el-input>
              </el-form-item></el-col>
              <el-col :span="12"><el-form-item label="手机号" prop="mobile" class="formItem">
                <el-input v-model="formDataAdd.mobile" placeholder="请输入手机号" type="text"></el-input>
              </el-form-item></el-col>
              <el-col :span="12"><el-form-item label="昵称" prop="nickName" class="formItem">
                <el-input v-model="formDataAdd.nickName" placeholder="请输入昵称" type="text"></el-input>
              </el-form-item></el-col>
              <el-col :span="12"> </el-col>
              <el-col :span="12"> </el-col>

              <el-col :span="12">
                <el-form-item label="显示排序" prop="orderNum">
                  <el-input-number v-model="formDataAdd.orderNum" controls-position="right" :min="0" />
                </el-form-item>
              </el-col>
            </el-row>
           
            
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog> -->
  </div>
</template>

<script>
import {
  adminList,
  adminInfo,
  adminUpdate,
  adminAdd,
  updatePassword,
  updateMyPassword,
  adminDelete,
  updateStatus,
  roleUpdate,
  roleListAll,
  getRole,
  adminRoleUpdate
} from '@/api/admin'
  export default {
    data (){
       return {
        open:false,
        title:'',
        rules:[],
        
        deptOptions:[],
        normalizer:[],
         form:{
          userType:'',
            staffname:'',
            page:1,
            size:10,
         },
         formDataAdd: {
        id: '',
        username: '',
        password: '',
        icon: '',
        email: '',
        nickName: '',
        note: '',
        status: 1,
        type: '',   //类型，1：平台用户，2：合伙人用户，3小店用户
        typeText: '',
        partnerId: '',
        sellerId: '',
        createBy: '',
        updateBy: '',
        serviceManager: 0,
        memberId: '',
        mobile: '',
        roleIds: [],
        roleIdsText: ''
      },
         roleList:[{id:2,name:'合伙人用户'},{id:3,name:'小店用户'}],
         tableData:[],
         total:0,
         listQuery: {
        pageNum: 1,
        pageSize: 20,
        keyword: undefined,
        partnerId: undefined,
        sellerId: undefined,
        userType:3
      },

         showStaffDetail:false
       }
    },
    mounted() {

    this.getAdminList()
    },
    methods: {
      handleCurrentChange(val) {
                this.listQuery.pageNum = val;
                this.getAdminList();
            },
         // 获取列表
    getAdminList() {
      console.log("会员列表")
      adminList(this.listQuery).then(res => {
        if (res.code === 200) {
          console.log("会员列表", res)
          this.tableData = res.data.list
          this.total = res.data.total
        } else {
          this.$message.error(res.message)
        }
      })
    },
    cancel(){

    },
    close(){
      
    },
        // 删除
        deleteadmin(id) {
      console.log(id)
      this.$confirm('此操作将永久删除该管理员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        adminDelete(id).then(res => {
          if (res.code === 200) {
            this.getAdminList()
            this.$message.success(res.message)
          } else {
            this.$message.error(res.message)
          }
        })
      }).catch(action => {
            this.$message({
              type: 'info',
              message: action === 'cancel'
                ? '已经取消移除'
                : '停留在当前页面'
            })
          });

    },
     searchShopStaff(){
      this.getAdminList()
     },
     pageChange(page){
       this.form.page = page
       //刷新数据

     },
     openShopStaffDetail(id){
       console.log(id)
      //  this.getRole(id)
      if (id) {
        adminInfo(id).then(res => {
          console.log(res)
          if (res.code === 200) {
            // this.$message.success('修改成功')
            this.formDataAdd = res.data

            // this.formDataAdd.type === 1 ? this.formDataAdd.typeText = "平台用户" : this.formDataAdd.type === 2 ? this.formDataAdd.typeText = "合伙人用户" : this.formDataAdd.typeText = '小店用户'
            this.showStaffDetail = true
         
          } else {
            this.$message.error(res.message)
          }
        })
      }
       
     },
     certainAddStaffRole(){
       this.showStaffDetail = false
     },
     deleteShopStaff(id){
       this.$confirm("确定删除该员工?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        //删除员工角色
        console.log(id)
      }).catch(() => {
        console.log('cancel')
      });
     },
      tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    }
  }
</script>

<style lang="scss" scoped>
.shop{
  padding: 20px;
  position: relative;
  .input_info{
    position: absolute;
    top: 20px;
    right:20px;
    // width: 300px;
  }
  .staff_al{
    float: left;
  }
  .staff_input{
    float: left;
    width:150px;
    margin-right: 12px;
    margin-top: 6px;
  }
  .input_btn{
    float: right;
    margin-top: 5px;
  }
  .pagination{
    float: right;
    margin-top: 15px;
  }
  .staff_info{
    padding: 20px;
    margin-right:300px;
  }
  .active-title{
    float: left;
    width: 100px;
    height: 28px;
    background-color: #f5f5f5;
    text-align: center;
    line-height: 28px;
    color: #666666;
    margin: 0 12px 10px 20px;
  }
  .active_subtitle{
    margin: 0px 12px 10px 90px;
  }
  .class_btn {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }
  .staff-col{
    margin-top: 10px;
  }
}
</style>